<template>
  <div class="edit-wrapper">
    <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">

      <el-form
        label-width="92px"
        ref="editForm"
        :model="editForm"
      >
        <el-form-item><span>导入时，请使用标准的《磁卡导入》模板，<a @click="downloadTemplate">点我下载模板</a></span></el-form-item>
        <el-form-item label="卡类型:">
          <el-select clearable v-model="cardType" placeholder="请选择">
            <el-option
              v-for="item in  $dictUtils.getDictList('cardType')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="`${this.$http.BASE_URL}/truck/cardRegister/import`"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
      :on-change="changeName">
        <p>
          <el-input slot="trigger" class="inputAppend-wrapper" v-model="fileName">
            <template slot="append"><span>选择</span></template>
          </el-input>
        </p>
      </el-upload>
      <p><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确定导入</el-button>
        <el-button @click="visible = false">取消</el-button></p>
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定导入</el-button>-->
<!--        <el-button @click="visible = false">取消</el-button>-->
<!--      </span>-->
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        cardType: '',
        fileList: [],
        title: '',
        method: '',
        fileName: '',
        visible: false,
        loading: false,
        tableData: [],
        inputForm: {
          id: '',
          ids: '',
          axle: '',
          moneys: '',
          loadingFee: 0,
          floatUnloadingFee: 0,
          dumpUnloadingFee: 0
        },
        editForm: {}
      }
    },
    components: {},
    methods: {
    	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
      init (method) {
        this.method = method
        if (method === 'importData') {
          this.title = '磁卡导入'
        }
        this.visible = true
        this.loading = false
        this.fileName = ''
        this.fileList = []
      },
      downloadTemplate () {
        this.$utils.download('/truck/cardRegister/import/template')
      },
      handlePreview (file) {
      },
      handleRemove (file, fileList) {
        this.fileName = ''
      },
      changeName (file) {
        this.fileName = file.name
      },
      submitUpload () {
        this.$refs.upload.submit()
        this.$notify({
          title: '导入成功',
          type: 'success'
        })
        this.fileName = ''
        this.fileList = []
        this.visible = false
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true

            this.$http({
              url: `/truck/cardFee/save`,
              method: 'post',
              data: this.tableData,
              headers: {'Content-Type': 'application/json; charset=utf-8'}
            }).then(({
              data
            }) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success('已保存')
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .edit-wrapper{
    ::v-deep.el-dialog{
      .el-form{
        .el-tabs__active-bar{
          display: none;
        }
        .el-row:first-child{
          .el-input__inner{
            width: 320px;
          }
        }
        .el-row:nth-child(2){
          .el-input__inner{
            width: 294px;
          }
        }
        .el-input-group__append{
          background: transparent;
          border: none;
          padding: 0 0 0 10px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
        .more-content{
          display: flex;
          .right-content{
            margin-left: -10px;
          }
          .right-content>div{
            margin-bottom: 20px;
            display: block;
            width: 100%;

            .el-input__inner{
              width: 224px;
            }

          }
        }

      }
    }
  }
</style>
